<template>
    <div class="top">
        <div class="conter">
            <ul>
                <li class="liebiao"><i class="iconfont icon-liebiao1"></i></li>
<!--                <li class="btn"><i class="iconfont icon-ai-ios"></i></li>-->
<!--                <li class="text">Mac</li>-->
<!--                <li class="text">Mac</li>-->
<!--                <li class="text">Mac</li>-->
<!--                <li class="text">Mac</li>-->
<!--                <li class="text">Mac</li>-->
<!--                <li class="text">Mac</li>-->
<!--                <li class="text">Mac</li>-->
                <li class="seerch"><i class="iconfont icon-sousuo"></i></li>
                <li class="btn"><i class="iconfont icon-bag"></i></li>
            </ul>
        </div>
    </div>
    <!--导航结束-->
    <div class="box boxf">
        <div class="textf">
            <h1>新广源</h1>

            <h2>人力资源中心.</h2>
        </div>
        <div class="wrapper">
            <a href="javascript:void(0)" @click="jump()">现在开始招工 ></a>
            <a href="javascript:void(0)" @click="jump()">报道了 > </a>
        </div>
        <div class="shopimg iphoe_x"></div>
    </div>
    <!--iphone X-->
    <div class="box iphone8">
        <div class="textf">
            <h1>舒适车间</h1>

            <h2>上班安排合理，加班多多，工资拿到手软</h2>
        </div>
<!--        <div class="wrapper">-->
<!--            <a href="">Learn more ></a>-->
<!--            <a href="">Buy > </a>-->
<!--        </div>-->
        <div class="shopimg iphoe_8"></div>
    </div>
    <!--iphone8-->
    <div class="box ipad">
        <div class="textf">
            <h1>招聘要求</h1>

            <h2>尽管来把，小时工，长工短工应有尽有.</h2>
        </div>
<!--        <div class="wrapper">-->
<!--            <a href="">Learn more ></a>-->
<!--            <a href="">Buy > </a>-->
<!--        </div>-->
        <div class="shopimg" style="height:100%"><img src="../assets/phone/zps.png" alt="" style="width: 100%"></div>
    </div>
    <!--ipd-->
    <div class="shop">
        <ul>
<!--            <li>-->
<!--                <div class="bkimg shopone">-->
<!--                    <div class="shop_top">-->
<!--                        <span class="watch"><img src="../assets/phone/watch_series_3_logo_large.png" alt=""></span>-->
<!--                        <h5 class="color">The freedom of cellular.</h5>-->
<!--                    </div>-->
<!--                    <div class="shop_bottom">-->
<!--                        <a href="">Learn more ></a>-->
<!--                        <a href="">Buy > </a>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </li>-->
<!--            <li>-->
<!--                <div class="bkimg shoptwo">-->
<!--                    <div class="shop_top">-->
<!--                        <h4>How to shoot on iPhone.</h4>-->
<!--                        <h5>Make the beautiful game even more beautiful.</h5>-->
<!--                    </div>-->

<!--                </div>-->
<!--            </li>-->
<!--            <li>-->
<!--                <div class="bkimg shopthree">-->
<!--                    <div class="shop_top">-->
<!--                        <h4>Music</h4>-->
<!--                        <h5>45 million songs. Three months on us.</h5>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </li>-->
            <li>
                <div class="bkimg shopfour">
                    <div class="shop_top">
                        <h4>从现在开始</h4>
                        <h5>加入新广源吧！</h5>
                    </div>
                </div>
            </li>
<!--            <li>-->
<!--                <div class="bkimg shopfive">-->
<!--                    <div class="shop_top">-->
<!--                        <span class="watchf">AirPods</span>-->
<!--                        <h5 class="color">The freedom of cellular.</h5>-->
<!--                    </div>-->
<!--                    <div class="shop_bottom">-->
<!--                        <a href="">Learn more ></a>-->
<!--                        <a href="">Buy > </a>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </li>-->
<!--            <li>-->
<!--                <div class="bkimg shopsix">-->
<!--                    <div class="shop_top">-->
<!--                        <span class="watchf">HomePod</span>-->
<!--                        <h5 class="color">The freedom of cellular.</h5>-->
<!--                    </div>-->
<!--                    <div class="shop_bottom">-->
<!--                        <a href="">Learn more ></a>-->
<!--                        <a href="">Buy > </a>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </li>-->
        </ul>
    </div>
    <!--shop-->
    <div class="footer">
        <div class="foot_nav">
<!--            <div class="fromtxt">-->
<!--                <dl>-->
<!--                    <dt>Shop and Learn  <span>+</span></dt>-->
<!--                    <dd><a href="">Mac</a></dd>-->
<!--                    <dd><a href="">iPad</a></dd>-->
<!--                    <dd><a href="">Mac</a></dd>-->
<!--                    <dd><a href="">iPad</a></dd>-->
<!--                    <dd><a href="">HomePod</a></dd>-->
<!--                    <dd><a href="">HomePod</a></dd>-->
<!--                    <dd><a href="">HomePod</a></dd>-->
<!--                    <dd><a href="">HomePod</a></dd>-->
<!--                    <dd><a href="">HomePod</a></dd>-->
<!--                    <dd><a href="">HomePod</a></dd>-->
<!--                    <dd><a href="">HomePod</a></dd>-->
<!--                </dl>-->
<!--            </div>-->
            <div class="toot_titf">
                找工作就到
<!--                <a href="">Apple Store,</a>-->
                新广源人力资源
<!--                <a href="">find a reseller.</a>-->
            </div>
<!--            <div class="toot_tits">-->
<!--                <div class="userright"><a href=""><span></span>United States</a></div>-->
<!--                <div class="userleft">Copyright © 2018 Apple Inc. All rights reserved.</div>-->
<!--                <div class="usercenters">-->
<!--                    <a href="">Privacy Policy</a>-->
<!--                    <a href=""> Terms of Use</a>-->
<!--                    <a href="">Sales and Refunds</a>-->
<!--                    <a href="">Legal</a>-->
<!--                    <a href="">Site Map</a>-->
<!--                </div>-->
<!--            </div>-->
        </div>
    </div>
</template>

<script>
    export default {
        name: "mobileIndex",
        methods:{
            jump(){
                this.$router.push('/mobileForm')
            },
        },
    }
</script>

<style scoped>
    @font-face {font-family: "iconfont";
        src: url('//at.alicdn.com/t/font_729087_fxjtm9wz32.eot?t=1530501996109'); /* IE9*/
        src: url('//at.alicdn.com/t/font_729087_fxjtm9wz32.eot?t=1530501996109#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
        url('//at.alicdn.com/t/font_729087_fxjtm9wz32.ttf?t=1530501996109') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url('//at.alicdn.com/t/font_729087_fxjtm9wz32.svg?t=1530501996109#iconfont') format('svg'); /* iOS 4.1- */
    }

    .iconfont {
        font-family:"iconfont" !important;
        font-size:16px;
        font-style:normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-sousuo:before { content: "\e613"; }

    .icon-ai-ios:before { content: "\e631"; }

    .icon-liebiao1:before { content: "\e649"; }

    .icon-bag:before { content: "\e600"; }
    *{
        margin: 0;
        padding: 0;
    }
    a{
        text-decoration: none;
    }
    .top{
        width: 100%;
        height: 44px;
        background: rgba(0,0,0,0.8);
        position: fixed;
        top: 0;
    }
    .conter{
        width: 1000px;
        height: 44px;
        margin: 0 auto;
    }
    .shop{
        width: 100%;
        overflow: hidden;
    }
    .conter ul{
        display: -webkit-flex; /* Safari */
        display: flex;
        list-style: none;
        justify-content: space-between;
    }
    .conter ul li{
        font-size: 14px;
        font-weight: 400;
        line-height: 44px;
        color: #fff;
    }
    .conter ul li:hover{
        color: #b6b6b6;
    }
    .liebiao{
        display: none;
    }
    .iconfont{
        font-size: 20px;
        font-weight: 400;
        line-height: 44px;
        color: #fff;
    }
    .iconfont:hover{
        color: #b6b6b6;
    }
    .box{
        width: 100%;

    }
    .boxf{
        margin-top: 50px;
    }
    .ipad{
        background: rgb(245,245,245);
    }
    .iphone8{
        /*background:rgb(249,230,240);*/
    }
    .box .textf{
        padding: 88px 10px 0;
    }
    .box .textf h1{
        text-align: center;

        width: 100%;
        margin: 0 auto;
        font-size: 60px;
        font-weight: 600;
        color: #111;
    }
    .box .textf h2{
        text-align: center;

        width: 100%;
        margin: 10px auto;
        font-size: 30px;
        font-weight: 400;
        color: #111;
    }
    .box .wrapper{
        margin-top: 15px;
        text-align: center;
    }
    .box .wrapper a{
        text-decoration: none;
        font-size: 25px;
        font-weight: 400;
        margin-right: 20px;
        color: #0070c9;
    }
    .box .shopimg{
        z-index: 1;
        margin: 60px auto 0;
        width: 1068px;
        height: 337px;
    }
    .box .iphoe_x{
        background:url("../assets/phone/behind_the_mac_large.jpg") no-repeat center;
    }
    .box .iphoe_8{
        background:url("../assets/phone/iphone_8_large.jpg") no-repeat center;
        background-size: 537px 378px;
    }
    .box .ipd{
        background: url("../assets/phone/ipad_large.jpg") no-repeat center;
        background-size: 930px 355px;
    }
    .shop ul{
        list-style: none;
        width: 100%;
    }
    .shop ul li{
        width: 49%;
        height: 580px;
        margin: 12px 0.25% 12px 0.5%;
        float: left;
        background: rgb(238,238,238);
    }
    .shop ul li:nth-child(5){
        background: rgb(250,250,250);
    }
    .shop ul li:nth-child(6){
        background: rgb(250,250,250);
    }
    .bkimg{
        width: 100%;
        height: 100%;
    }
    .shop_top{
        width: 100%;
        height: 140px;
    }
    .shop_top .watch{
        display:block;
        width: 131px;
        height: 40px;
        margin: 0 auto;
        padding-top: 41px;
        font-size: 40px;
        line-height: 1.1;
        font-weight: 600;
        color: #111;
    }
    .shop_top .watchf{
        display:block;
        text-align: center;
        height: 40px;
        margin: 0 auto;
        padding-top: 41px;
        font-size: 40px;
        line-height: 1.1;
        font-weight: 600;
        color: #111;
    }
    .shop_top h4{
        text-align: center;
        display: block;
        width: 100%;
        margin: 0 auto;
        padding-top: 80px;
        font-size: 40px;
        line-height: 1.2381;
        font-weight: 400;
        color: #fff;
    }
    .shop_top h5{
        text-align: center;
        display: block;
        width: 100%;
        margin: 0 auto;
        padding-top: 10px;
        font-size: 24px;
        line-height: 1.2381;
        font-weight: 400;
        color: #fff;
    }
    .shop_top .color{
        color: #111;
    }
    .shop_bottom{
        text-align: center;
    }
    .shop_bottom a{
        font-size: 20px;
        font-weight: 400;
        color: #0070c9;
    }
    .shopone{
        background: url("../assets/phone/watch_series_3_large.jpg")no-repeat center bottom 0;
    }
    .shoptwo{
        background: url("../assets/phone/how_to_shoot_large.jpg")no-repeat center bottom 0;
    }
    .shopthree{
        background: url("../assets/phone/music_three_months_large.jpg")no-repeat center bottom 0;
    }
    .shopfour{
        background: url("../assets/phone/behind_the_mac_large.jpg")no-repeat center bottom 0;
    }
    .shopfive{
        background: url("../assets/phone/airpods_large.jpg")no-repeat center bottom 0;
    }
    .shopsix{
        background: url("../assets/phone/homepod_large.jpg")no-repeat center bottom 0;
    }
    .footer{
        width: 100%;
        background: rgb(242,242,242);
        margin-bottom: 0;
        overflow: hidden;
    }
    .foot_nav{
        width: 1000px;
        margin: 0 auto;
        background: rgb(242,242,242);
    }
    .foot_nav .toot_titf{
        margin-bottom: 7px;
        padding: 20px 0 8px;
        border-bottom: 1px solid #d6d6d6;
        font-size: 11px;
        color: #888;
    }
    .foot_nav .toot_titf a{
        color: #0070c9;
    }
    .foot_nav .toot_titf a:hover{
        text-decoration: underline
    }
    .foot_nav .toot_tits{
        color: #888;
        padding: 0 0 30px;
        font-size: 11px;

    }
    .fromtxt{
        width: 100%;
        overflow: hidden;
        padding-top: 50px;
    }
    .foot_nav dl{
        width: 20%;
        float: left;

    }
    .foot_nav dl dt{
        font-weight: 600;
        display: block;
        margin-bottom: 9px;
        font-size: 9px;
    }
    .foot_nav dl dd{
        display: block;
        margin-bottom: 9px;
        color: #555;
        font-size: 11px;
    }
    .foot_nav dl dd a{
        color: #555;
    }
    .foot_nav dl dd a:hover{
        text-decoration: underline
    }
    .foot_nav dl dt span{
        display: none;
    }
    .foot_nav dl dt span:hover{
        cursor:pointer;
    }
    .box .wrapper a:hover{
        text-decoration: underline
    }
    .shop_bottom a:hover{
        text-decoration: underline
    }
    .toot_tits .userleft{
        margin-top: 5px;
        margin-right: 30px;
        float: left;
    }
    .toot_tits .usercenters{
        margin-right: 30px;
        float: left;
    }
    .toot_tits .usercenters a{
        border-right: 1px solid #d6d6d6;
        margin-right: 7px;
        padding-right: 10px;
        display: inline-block;
        margin-top: 5px;
        white-space: nowrap;
        color: #555;
    }
    .toot_tits .usercenters a:hover{
        text-decoration: underline
    }
    .toot_tits .usercenters a:nth-child(5){
        border: none;
    }
    .toot_tits .userright{
        float: right;
        margin-top: 5px;
        position: relative;
        top: -3px;
        z-index: 2;
        white-space: nowrap;
    }
    .toot_tits .userright span{
        background-repeat: no-repeat;
        background-size: 16px 16px;
        display: inline-block;
        width: 16px;
        height: 16px;
        background-image: url(../assets/phone/16.png);
        padding-right: 5px;
        background-position: left center;
        cursor: pointer;
        float: left;
        margin-top: -1px;
    }
    .toot_tits .userright a{
        color: #555;
    }
    .toot_tits .userright a:hover{
        text-decoration: underline
    }
    @media screen and (max-width: 1024px){
        .conter{
            width: 100%;}
        .conter ul{
            padding: 0 14px;
        }
        .box .shopimg{
            width: 763px;
            height: 336px;
        }
        .box .iphoe_x{
            background-size:736px 336px ;
        }
        .box .iphoe_8{
            background-size: 537px 378px;
        }
        .box .ipd{
            background-size: 650px 325px;
        }

        .foot_nav{
            width: 100%;
        }
        .toot_tits .userright{
            margin-top: 10px;
            margin-right: 10px;
        }
        .toot_tits .usercenters{
            margin: 5px  50px 30px 0;
        }
        .footer{
            padding-left: 16px;
        }
    }

    @media screen and (max-width: 768px){

        .liebiao{
            display: block;
        }
        .text,.seerch{
            display: none;
        }
        .box .shopimg{
            width: 320px;
            height: 353px;
        }
        .box .iphoe_x{
            background:url("../assets/phone/127.jpg") no-repeat center;
        }
        .box .iphoe_8{
            background: url("../assets/phone/gc.jpg")no-repeat center;
        }
        .box .ipd{
            background: url("../assets/phone/zps.png") no-repeat center;
        }
        .shop ul li{
            width: 99%;
        }
        .foot_nav dl dd{
            display: none;
        }
        .foot_nav dl{
            width: 100%;
            margin: 0 auto;

        }
        .foot_nav{
            width: 100%;
        }
        .fromtxt{
            padding-top: 21px;

        }
        .foot_nav dl dt{
            border-bottom:1px solid rgba(0,0,0,0.15);
            padding: 15px 0 10px 16px;
        }
        .foot_nav dl dt span{
            display: block;
            float: right;
            font-size: 13px;
            padding-right: 16px;
        }
        .foot_nav .toot_titf{
            padding: 20px 0 8px 16px;
        }
        .toot_tits .userright{
            width: 80%;
            padding: 10px 0 0 16px;
            float: left;
        }
        .toot_tits .userleft{
            padding-left: 16px;
        }
        .toot_tits .usercenters{
            padding-left: 16px;
            margin-bottom: 28px;
        }
    }

</style>